<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.2.1-控制框架代码的体积</title>
</head>
<body>
    
</body>
    <script>
        /**
         * 框架的大小也是衡量框架的标准之一
         * - 在实现同样功能的情况下，当然是用的代码越少越好，
         *   这样体积就会越小，最后浏览器加载资源的时间也就越少
         * 
         * Vue.js 在输出资源的时候，会输出两个版本，其中一个用于开发环境
         * - vue.global.js 用于开发环境
         * - vue.global.prod.js 用于生产环境
         * 
         * Vue.js 3 的源码，就会发现每一个 warn 函数的调用都会配合 __DEV__ 常量的检查
         * - 构建用于开发环境的资源时，会把 __DEV__ 常量设置为true
         * - 构建生产环境的资源时，会把 __DEV__ 常量设置为false
         * - __DEV__ 常量替换为字面量 false, 这段永远不会执行的代码称为 dead code，它不会出现在最终产物中
         * 
         * 在开发环境中为用户提供友好的警告信息的同时，不会增加生产环境代码的体积
        */
       
        if (__DEV__ && !res){
            warn(
                `Failed to mount app: mount target selector "${container}" returned null.`
            )
        }
    </script>
</html>